// 设备管理
import React from 'react';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableFooter from '@material-ui/core/TableFooter';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import TablePagination from '@material-ui/core/TablePagination';
import IconButton from '@material-ui/core/IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import LastPageIcon from '@material-ui/icons/LastPage';
import Statistics from './Statistics'
// 表格标题样式
const StyledTableCell = withStyles(theme => ({
    head: {
        // backgroundColor: '#47484c',
        color: '#333',
        fontWeight:'bold'
    }
}))(TableCell);

const useStyles = makeStyles(theme => ({
    container: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    button: {
        margin: theme.spacing(1),
    },
    textField: {
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
        width: 200,
    },
    dense: {
        marginTop: 19,
    },
    menu: {
        width: 200,
    },
}));

const useStyles1 = makeStyles(theme => ({
    root: {
        flexShrink: 0,
        color: theme.palette.text.secondary,
        marginLeft: theme.spacing(2.5),
    },
}));

// 分页控制器
function TablePaginationActions(props) {
    const classes = useStyles1();
    const theme = useTheme();
    const { count, page, rowsPerPage, onChangePage } = props;

    function handleFirstPageButtonClick(event) {
        onChangePage(event, 0);
    }

    function handleBackButtonClick(event) {
        onChangePage(event, page - 1);
    }

    function handleNextButtonClick(event) {
        onChangePage(event, page + 1);
    }

    function handleLastPageButtonClick(event) {
        onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
    }

    return (
        <div className={classes.root}>
            <IconButton
                onClick={handleFirstPageButtonClick}
                disabled={page === 0}
                aria-label="first page"
            >
                {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
            </IconButton>
            <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
                {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
            </IconButton>
            <IconButton
                onClick={handleNextButtonClick}
                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
                aria-label="next page"
            >
                {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
            </IconButton>
            <IconButton
                onClick={handleLastPageButtonClick}
                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
                aria-label="last page"
            >
                {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
            </IconButton>
        </div>
    );
}

TablePaginationActions.propTypes = {
    count: PropTypes.number.isRequired,
    onChangePage: PropTypes.func.isRequired,
    page: PropTypes.number.isRequired,
    rowsPerPage: PropTypes.number.isRequired,
};

// 解除绑定
function RemoveBind(){
    function removeBind(){
        alert('已解除绑定');
    }

    return (
        <span onClick={removeBind} style={{color:'rgb(60, 154, 255)',cursor:'pointer'}}>解除绑定</span>
    )
}

/**
 * 创建一行数据
 * @param {string} name 姓名 
 * @param {string} fatLevel 肥胖等级 
 * @param {string} gender 性别 
 * @param {number} age 年龄 
 * @param {number} phoneNumber 手机号 
 * @param {string} houseNumber 门牌号 
 * @param {string} addressDetail 期/苑/栋/单元/层 
 * @param {number} deviceNo 设备号
 * @param {number} familyNumber 住户数
 * @param {boolean} isLine 是否在线
 * @param {string} doSomething 操作
 */
function createData(name, fatLevel, gender,age,phoneNumber,houseNumber,addressDetail,deviceNo,familyNumber,isLine,doSomething) {
    return { 
        name, 
        fatLevel, 
        gender,
        age,
        phoneNumber,
        houseNumber,
        addressDetail,
        deviceNo,
        familyNumber,
        isLine:isLine ? '在线' : '离线',
        doSomething:doSomething, 
    };
}

// table数据
const rows = [
    createData('杰克', '轻度肥胖', '男', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝1', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝2', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝3', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝4', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝5', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝6', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝7', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝8', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝9', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝10', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝11', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝12', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝13', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝14', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝15', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝16', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝17', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝18', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝19', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
    createData('肉丝20', '较轻', '女', 50, 18749866997, 1203, '1/1/1/1/1', '0101010100', 3, '在线' ,<RemoveBind />),
];

const useStyles2 = makeStyles(theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing(1),
    },
    table: {
        minWidth: 500,
        height: 500,
    },
    tableWrapper: {
        overflowX: 'auto',
    },
    cell:{
        padding:theme.spacing(1.5)
    }
}));

// 自定义分页表格
function CustomPaginationActionsTable() {
    const classes = useStyles2();
    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(5);

    const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);

    function handleChangePage(event, newPage) {
        setPage(newPage);
    }

    function handleChangeRowsPerPage(event) {
        setRowsPerPage(parseInt(event.target.value, 10));
        setPage(0);
    }

    return (
        <Paper className={classes.root}>
            <div className={classes.tableWrapper}>
                <Table className={classes.table}>
                    <TableHead>
                        <TableRow>
                            <StyledTableCell className={classes.cell}>户住名</StyledTableCell>
                            <StyledTableCell className={classes.cell}>肥胖等级</StyledTableCell>
                            <StyledTableCell className={classes.cell}>姓别</StyledTableCell>
                            <StyledTableCell className={classes.cell}>年龄</StyledTableCell>
                            <StyledTableCell className={classes.cell}>手机号</StyledTableCell>
                            <StyledTableCell className={classes.cell}>门牌号</StyledTableCell>
                            <StyledTableCell className={classes.cell}>期/苑/栋/单元/层</StyledTableCell>
                            <StyledTableCell className={classes.cell}>设备号</StyledTableCell>
                            <StyledTableCell className={classes.cell}>住户数</StyledTableCell>
                            <StyledTableCell className={classes.cell}>状态</StyledTableCell>
                            <StyledTableCell className={classes.cell}>操作</StyledTableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => (
                            <TableRow key={row.name}>
                                <TableCell className={classes.cell} component="th" scope="row">
                                    {row.name}
                                </TableCell>
                                <TableCell className={classes.cell}>{row.fatLevel}</TableCell>
                                <TableCell className={classes.cell}>{row.gender}</TableCell>
                                <TableCell className={classes.cell}>{row.age}</TableCell>
                                <TableCell className={classes.cell}>{row.phoneNumber}</TableCell>
                                <TableCell className={classes.cell}>{row.houseNumber}</TableCell>
                                <TableCell className={classes.cell}>{row.addressDetail}</TableCell>
                                <TableCell className={classes.cell}>{row.deviceNo}</TableCell>
                                <TableCell className={classes.cell}>{row.familyNumber}</TableCell>
                                <TableCell className={classes.cell}>{row.isLine}</TableCell>
                                <TableCell className={classes.cell}>{row.doSomething}</TableCell>
                            </TableRow>
                        ))}

                        {emptyRows > 0 && (
                            <TableRow style={{ height: 48 * emptyRows }}>
                                <TableCell className={classes.cell} />
                            </TableRow>
                        )}
                    </TableBody>
                    <TableFooter>
                        <TableRow>
                            <TablePagination
                                rowsPerPageOptions={[5, 10]}
                                colSpan={12}
                                count={rows.length}
                                rowsPerPage={rowsPerPage}
                                page={page}
                                SelectProps={{
                                    inputProps: { 'aria-label': 'rows per page' },
                                    native: true,
                                }}
                                onChangePage={handleChangePage}
                                onChangeRowsPerPage={handleChangeRowsPerPage}
                                ActionsComponent={TablePaginationActions}
                            />
                        </TableRow>
                    </TableFooter>
                </Table>
            </div>
        </Paper>
    );
}




export default function App(props) {
    const classes = useStyles();
    let [searchs,setSearchs] = React.useState({
        name:'',
        phoneNumber:'',
        houseNumber:'',
        deviceNo:'',
    })
    // 输入框变化 更新搜索对象
    function handleChange(key,value){
        let _searchs = searchs;
        _searchs[key] = value;
        setSearchs({..._searchs});
    }
    // 提交搜索
    function handleSearch(){
        console.log(searchs);
    }


    return (
        <div className="main-page-content">
            <div className={classes.container} noValidate autoComplete="off" style={{ textAlign: 'right' }}>
                <TextField
                    id="standard-name"
                    label="姓名"
                    className={classes.textField}
                    value={searchs.name}
                    onChange={(event) =>{ handleChange('name',event.target.value) }}
                    margin="normal"
                />
                <TextField
                    id="standard-name"
                    label="手机号"
                    className={classes.textField}
                    value={searchs.phoneNumber}
                    onChange={(event) =>{ handleChange('phoneNumber',event.target.value) }}
                    margin="normal"
                />
                <TextField
                    id="standard-name"
                    label="门牌号"
                    className={classes.textField}
                    value={searchs.houseNumber}
                    onChange={(event) =>{ handleChange('houseNumber',event.target.value) }}
                    margin="normal"
                />
                <TextField
                    id="standard-name"
                    label="设备号"
                    className={classes.textField}
                    value={searchs.deviceNo}
                    onChange={(event) =>{ handleChange('deviceNo',event.target.value) }}
                    margin="normal"
                />
                <Button onClick={handleSearch} variant="contained" color="primary" className={classes.button} style={{ WebkitAlignSelf: 'flex-end', alignSelf: 'flex-end', height: '40px' }}>
                    搜索
                </Button>
            </div>
            <Statistics></Statistics>
            <CustomPaginationActionsTable></CustomPaginationActionsTable>
        </div>
    )
}